<template>
  <div class="exam-detail">
    <el-card class="exam-info">
      <div class="exam-header">
        <h1 class="exam-title">{{ examInfo.title }}</h1>
        <div class="exam-meta">
          <span><i class="el-icon-time"></i> 考试时长: {{ examInfo.duration }}分钟</span>
          <span><i class="el-icon-document"></i> 总分: {{ examInfo.totalScore }}分</span>
          <span><i class="el-icon-date"></i> 截止日期: {{ formatDate(examInfo.endTime) }}</span>
        </div>
      </div>
      
      <div class="exam-description">
        <h3>考试说明</h3>
        <p>{{ examInfo.description }}</p>
      </div>
      
      <div class="exam-rules">
        <h3>考试规则</h3>
        <ul>
          <li>考试时间为{{ examInfo.duration }}分钟，超时系统将自动提交</li>
          <li>考试过程中请勿刷新页面或离开考试界面</li>
          <li>考试总分为{{ examInfo.totalScore }}分，及格分数为{{ examInfo.passScore }}分</li>
          <li v-if="examInfo.allowRetake">本次考试允许重考，最多可参加{{ examInfo.maxAttempts }}次</li>
          <li v-else>本次考试不允许重考，请认真作答</li>
        </ul>
      </div>
      
      <div class="exam-actions">
        <el-button 
          type="primary" 
          size="large" 
          @click="startExam" 
          :disabled="!canTakeExam">
          {{ startButtonText }}
        </el-button>
        <el-button v-if="hasResults" @click="viewResults">查看历史成绩</el-button>
      </div>
    </el-card>
    
    <!-- 历史成绩 -->
    <el-dialog title="历史成绩" :visible.sync="resultsVisible" width="70%">
      <el-table :data="examResults" style="width: 100%">
        <el-table-column prop="attemptNo" label="尝试次数" width="100"></el-table-column>
        <el-table-column prop="score" label="得分" width="100"></el-table-column>
        <el-table-column prop="submitTime" label="提交时间"></el-table-column>
        <el-table-column prop="duration" label="用时(分钟)" width="120"></el-table-column>
        <el-table-column label="操作" width="120">
          <template slot-scope="scope">
            <el-button type="text" @click="viewResultDetail(scope.row)">查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExamDetail',
  
  data() {
    return {
      examId: null,
      examInfo: {
        title: '',
        duration: 0,
        totalScore: 0,
        passScore: 0,
        startTime: '',
        endTime: '',
        description: '',
        allowRetake: false,
        maxAttempts: 1
      },
      examResults: [],
      resultsVisible: false,
      loading: true
    }
  },
  
  computed: {
    canTakeExam() {
      const now = new Date().getTime()
      const startTime = new Date(this.examInfo.startTime).getTime()
      const endTime = new Date(this.examInfo.endTime).getTime()
      
      // 检查考试是否在有效时间内
      if (now < startTime || now > endTime) {
        return false
      }
      
      // 检查是否已达到最大尝试次数
      if (!this.examInfo.allowRetake && this.examResults.length > 0) {
        return false
      }
      
      if (this.examInfo.allowRetake && this.examResults.length >= this.examInfo.maxAttempts) {
        return false
      }
      
      return true
    },
    
    startButtonText() {
      if (!this.canTakeExam) {
        const now = new Date().getTime()
        const startTime = new Date(this.examInfo.startTime).getTime()
        const endTime = new Date(this.examInfo.endTime).getTime()
        
        if (now < startTime) {
          return '考试未开始'
        } else if (now > endTime) {
          return '考试已结束'
        } else if (this.examResults.length >= this.examInfo.maxAttempts) {
          return '已达最大尝试次数'
        }
      }
      
      return '开始考试'
    },
    
    hasResults() {
      return this.examResults && this.examResults.length > 0
    }
  },
  
  created() {
    this.examId = this.$route.params.id
    this.fetchExamInfo()
    this.fetchExamResults()
  },
  
  methods: {
    async fetchExamInfo() {
      try {
        this.loading = true
        // 这里替换为实际的API调用
        const response = await this.$api.exam.getExamInfo(this.examId)
        this.examInfo = response.data
      } catch (error) {
        this.$message.error('获取考试信息失败')
      } finally {
        this.loading = false
      }
    },
    
    async fetchExamResults() {
      try {
        // 这里替换为实际的API调用
        const response = await this.$api.exam.getExamResults(this.examId)
        this.examResults = response.data
      } catch (error) {
        this.$message.error('获取考试结果失败')
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return ''
      const date = new Date(dateString)
      return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    },
    
    startExam() {
      if (this.canTakeExam) {
        this.$router.push(`/exam/take/${this.examId}`)
      }
    },
    
    viewResults() {
      this.resultsVisible = true
    },
    
    viewResultDetail(result) {
      this.$router.push(`/exam/result/${this.examId}?attempt=${result.attemptNo}`)
    }
  }
}
</script>

<style lang="scss" scoped>
.exam-detail {
  max-width: 900px;
  margin: 20px auto;
  
  .exam-info {
    margin-bottom: 20px;
    
    .exam-header {
      border-bottom: 1px solid #eee;
      padding-bottom: 15px;
      margin-bottom: 20px;
      
      .exam-title {
        margin: 0 0 15px;
        font-size: 24px;
      }
      
      .exam-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 20px;
        color: #666;
        
        span {
          i {
            margin-right: 5px;
          }
        }
      }
    }
    
    .exam-description, .exam-rules {
      margin-bottom: 20px;
      
      h3 {
        font-size: 18px;
        margin-bottom: 10px;
      }
      
      p {
        line-height: 1.6;
        color: #333;
      }
      
      ul {
        padding-left: 20px;
        
        li {
          margin-bottom: 8px;
          line-height: 1.5;
        }
      }
    }
    
    .exam-actions {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 30px;
    }
  }
}

@media (max-width: 768px) {
  .exam-detail {
    padding: 0 15px;
    
    .exam-info {
      .exam-header {
        .exam-meta {
          flex-direction: column;
          gap: 10px;
        }
      }
      
      .exam-actions {
        flex-direction: column;
        align-items: center;
        
        .el-button {
          width: 100%;
          margin-left: 0;
          margin-bottom: 10px;
        }
      }
    }
  }
}
</style> 